<template>
  <div class="app">
    <div>
      <div class="header">
        <h1>国利</h1>
        <div style="border-bottom: 2px solid #eee;margin-top:15px;margin-bottom: 15px"></div>
        <strong>基本信息</strong>
      </div>
      <el-table :data="tableData" style="width: 50%" border>
        <el-table-column label=" " prop="col1"></el-table-column>
        <el-table-column label=" " prop="col2"></el-table-column>
        <el-table-column label=" ">
          <template #default="scope">
            <el-button v-if="scope.row.col1 === '账户余额'" type="primary" @click="goToRecharge">充值</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>


</template>


<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const tableData = ref([
  { col1: '当前版本', col2: '试用版' },
  { col1: '人工坐席', col2: '0' },
  { col1: '收费方式', col2: '预付' },
  { col1: '结算货币', col2: 'CNY' },
  { col1: '账户余额', col2: '0元' },
]);

const goToRecharge = () => {
  sessionStorage.setItem('activeIndex', '2');
  router.push({ name: '账单' });
};

</script>


<style>
.header {
  text-align: left;
}

.header h1 {
  font-size: 2em;
}

.header hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

.header strong {
  font-size: 1.3em;
}
</style>